<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>panels-wells</title><link rel="icon" type="image/png" sizes="16x16" href="img/favicon.png">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/panels-wells.css" type="text/css"/>
		<link rel="stylesheet" href="font2/iconfont.css" />
	</head>
	<body>
		<nav>
			<div class="nav_1">
            <div class="nav_img">
                <img src="img/logo.png" style="display: inline-block"/>
                <img src="img/text.png" class="twospic" style="display: inline-block"/>
            </div>
	        </div>
	        <ul class="nav_ul">
	        	<li><i class="iconfont icon-santiaogang" style="display: none;padding-top:5px"></i></li>
	            <li class="nav_ul-f">
	                <i class="iconfont icon-forms"></i>
	                <ul class="nav_ul_1">
	                    <li>You Have 4 New Message</li>
	                    <li>
	                        <img src="img/varun2.jpg"/>
	                        <span>Pavan Kumar</span>
	                        <p>9:30 AM</p>
	                    </li>
	                    <li>
	                        <img src="img/varun3.jpg"/>
	                        <span>Hritik Roshan</span>
	                        <p>9:20 AM</p>
	                    </li>
	                    <li>
	                        <img src="img/varun4.jpg"/>
	                        <span>Pwandeep rajan</span>
	                        <p>9:10 AM</p>
	                    </li>
	                    <li>
	                        <img src="img/varun5.jpg"/>
	                        <span>John Abraham</span>
	                        <p>9:40 AM</p>
	                    </li>
	                    <li>Sell all notifications</li>
	                </ul>
	            </li>
	            <li>
	                <i class="iconfont icon-627yuanquanxuanzhong"></i>
	                <div class="nav_ul_2"><img src="img/nav_ul_2.png"/></div>
	            </li>
	            <li><i>Mega</i></li>
	        </ul>
	        <div class="nav_user">
	            <img class="nav_userimg" src="img/varun.jpg">
	            <h3>Steave</h3>
	            <div class="nav_arror"></div>
	        </div>
	        <div class="nav_input">
	            <input type="text" placeholder="Search..."/>
	            <img src="img/bigmirror.png"/>
	        </div>
	        </nav>
		<div class="content">
			<aside> 
				<ul class="aside_ul">
	                <li><i class="iconfont icon-santiaogang"></i><span>Navigation</span></li>
	                <li class="libox">
	                    <img class="nav_userimg" src="img/varun.jpg">
	                    <span>Steve Gection</span>
	                    <b></b>
	                </li>
	                <li class="dom">
                    <a href="baipengfei.html"><h3>A</h3><h5>Baipengfei</h5></a>
                    <a href="Dashboard1.html"><h3>B</h3><h5>Zhangqifan</h5></a>
                    <a href="Dashboard3.html"><h3>C</h3><h5>Yangxu</h5></a>
                    <a href="chart.html"><h3>D</h3><h5>Liusaisai</h5></a>
                    <a href="user_card.html"><h3>E</h3><h5>Zhangyifan</h5></a>
                    <a href="UI Elements.html"><h3>F</h3><h5>Jingjing</h5></a>
                    <a href="panels-wells.html"><h3>G</h3><h5>Liudan</h5></a>
                </li>
	                <li class="libox"><i class="iconfont icon-dashboard"></i><span>Dash Board</span></li>
	                <li class="libox"><i class="iconfont icon-gouwuchekong"></i><span>eCommerce</span><b></b></li>
	                <li class="libox"><i class="iconfont icon-xiaolian1"></i><span>UI Elements</span></li>
	                <li class="libox"><i class="iconfont icon-pages"></i><span>Sample Pages</span></li>
	                <li class="libox"><i class="iconfont icon-table"></i><span>Apps</span><b></b></li>
	                <li class="libox"><i class="iconfont icon-charts"></i><span>Forms</span><b></b></li>
	                <li class="libox"><i class="iconfont icon-huojian"></i><span>Tables</span></li>
	                <li class="libox"><i class="iconfont icon-apps"></i><span>Charts</span><b></b></li>
	                <li class="libox"><i class="iconfont icon-loginsecuritycode"></i><span>Wid Gets</span></li>
	                <li class="libox"><i class="iconfont icon-forms"></i><span>Icons</span></li>
	                <li class="libox"><i class="iconfont icon-xiaolian"></i><span>Google Map</span><b></b></li>
	                <li class="libox"><i class="iconfont icon-calender-check-o"></i><span>Calender</span></li>
	                <li class="libox"><i class="iconfont icon-lianjie"></i><span>Gallern</span><b></b></li>
	            </ul>
	            </aside>
	                <!--右边侧边栏-->
    <div class="Bright">
        <div class="Bright_1">
            <span>SERVICE PANEL</span>
            <span class="Bright_1_1">×</span>
        </div>
        <div class="Bright_2">
            <div class="Bright_2_1">
                <h3>With Light sidebar</h3>
                <div class="Bright_2_1_1">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="Bright_2_2">
                <h3>With Dark sidebar</h3>
                <div class="Bright_2_2_1">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="Bright_2_3">
                <h3>Chat option</h3>
                <ul class="Bright_2_3_1">
                    <li>
                        <a href="#">
                            <img src="img/varun.jpg"/>
                            <span>
                                Varun Dhavan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun2.jpg"/>
                            <span>
                                GeneLia Deshmukh
                                <small class="text-success other1">Away</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun3.jpg"/>
                            <span>
                                Ritesh Deshmukh
                                <small class="text-success other2">Bush</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun4.jpg"/>
                            <span>
                                Arijit Sinh
                                <small class="text-success other3">Offline</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun5.jpg"/>
                            <span>
                                Govinda Star
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun6.jpg"/>
                            <span>
                                John Abraham
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun7.jpg"/>
                            <span>
                                Hritik Roshan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun8.jpg"/>
                            <span>
                                Pwandeep rajan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
	         </div>
			
			<div class="panels-wells">
				<div class="panels-wells-con">
					<div class="panels-con">
						
						<!---------------------标题---------------------->
						<div class="panels-con-tit">
							<div class="panels-con-tit-left">
								<h3>PANELS & WELLS</h3>
							</div>
							<div class="panels-con-tit-right">
								<ul class="panels-tit-right-uls">
									<li><a href="">Dashboard</a><span>/</span></li>
									<li><a href=""> UI Elements</a><span>/</span></li>
									<li><a href=""> Panels & Wells</a></li>
								</ul>
								<a href="###" class="tit-right-buy zzc">buy admin now</a>
								<button><i class="iconfont icon-shezhi"></i></button>
							</div>
						</div>
						<!-----------------第一部分------------------------------------>
						<div class="rows first">
							<div class="row first-con">
								<div class="first-con-tit">
									<h3>SIMPLE WHITE BOX PANEL</h3>
									Its a simple, give white-box class to div 
									<code> &lt;div class="white-box"&gt; ... &lt;/div&gt; </code>
								</div>
							</div>
						</div>	
						
					<!-----------------------------------列表一-------------------------------->
					<div class="rows first">
						
						<div class="del-first-child">
							<div class="first-child-cons">
								<div class="first-child-con">
									<div class="first-child-con-tit">
										<h4>Default Panel</h4>
									</div>
									<div class="first-child-con-cont">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
										<a href="###" class="getcade">get cade</a>
										<div class="get-cade">
											<div class="get-cade-con">
												<code> &lt;div class="panel panel-default"&gt;<br>
								                    &nbsp; &nbsp;&lt;div class="panel-heading"&gt;Default Panel&lt;/div&gt; <br>
								                    <br>
								                    &lt;div class="panel-wrapper collapse in"&gt;<br>
								                    &nbsp;&nbsp; &lt;div class="panel-body"&gt;<br>
								                    ... ... ...<br>
								                    &nbsp;&nbsp; &lt;/div&gt;<br>
								                    &lt;/div&gt;<br>
								                    <br>
								                    &lt;div class="panel-footer"&gt; Panel Footer &lt;/div&gt;<br>
								                    &lt;/div&gt; 
												</code>
							               </div>
										</div>
									</div>
									<div class="first-child-con-last">
										<h5>Panel Footer</h5>
									</div>
								</div>
							</div>
						</div>
						<div class="del-first-child">
							<div class="first-child-cons">
								<div class="first-child-con">
									<div class="first-child-con-tit">
										<h4 class="more">Panel with action<span><a herf="###" class="min">-</a><a href="###" class="del">×</a></span></h4>
									</div>
									<div class="first-child-con-cont">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
										<a href="###" class="zzc">Demo button</a>
									</div>
									<div class="first-child-con-last">
										<h5>Panel Footer</h5>
									</div>
								</div>
							</div>
						</div>
							
							
						<div class="del-first-child">
							<div class="first-child-cons">
								<div class="first-child-con">
									<div class="first-child-con-cont">
										<h4>BODY TITLE HEADING H3</h4>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
										Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Rorem psum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.</p>
										<p> Aliquam ornare lacus adipiscing, posuere lectus et, fringilla auguelacus adipiscing, posuere lectus et, fringilla augue.</p>
										<a href="###" class="greens">Demo button</a>
									</div>
								</div>
							</div>
						</div>
					</div>
						
					<div class="rows second">
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3>Title with small<span> This is the small text...</span></h3>
								</div>
								<div class="second-child-cons">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3><i class="iconfont icon-shezhi"></i>Panel with icon</h3>
								</div>
								<div class="second-child-cons">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3>Panel with label <strong>new</strong></h3>
								</div>
								<div class="second-child-cons">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
					</div>
							
							
					<div class="rows second">
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3>Title with small<a> DropDown <span class="sjx"></span></a></h3>
									<ul class="second-child-tit-childs">
										<li><a href="###">Reply</a></li>
										<li><a href="###">Share</a></li>
										<li><a href="###">Delete</a></li>
										<li><a href="###">Settings</a></li>
									</ul>
								</div>
								<div class="second-child-cons">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
								<div class="second-child-con-last">
									<p>Panel Footer</p>
								</div>
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3>Panel with Tables</h3>
								</div>
								<div class="second-child-con-tab">
									<table>
										<thead>
											<tr>
												<th class="tr-f">#</th>
												<th class="tr-s">First Name</th>
												<th  class="tr-t">Last Name</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td  class="tr-f">1</td>
												<td  class="tr-s">Mark</td>
												<td  class="tr-t">Otto</td>
											</tr>
											<tr>
												<td  class="tr-f">2</td>
												<td  class="tr-s">Otto</td>
												<td  class="tr-t">Thornton</td>
											</tr>
											<tr>
												<td  class="tr-f">3</td>
												<td  class="tr-s">Steave</td>
												<td  class="tr-t">Jobs</td>
											</tr>
										</tbody>
									</table>
								</div>
								
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-con-tit">
									<h3>Panel With tab</h3>
								</div>
								<ul class="second-child-uls">
									<li class="second-child-uls-item"><a href="###" class="second-child-uls-a active"><span>Home </span><i class="iconfont icon-zhuye"></i></a></li>
									<li class="second-child-uls-item"><a href="###" class="second-child-uls-a"><span>Profile</span><i class="iconfont icon-ren"></i></a></li>
									<li class="second-child-uls-item"><a href="###" class="second-child-uls-a"><span>Messages</span><i class="iconfont icon-xinfeng"></i></a></li>
								</ul>
								<div class="second-child-uls-childs">
									<div class="second-child-panels-tab">
										<div class="second-child-tab active">
											<div class="second-child-left">
												<h3>Best Clean Tab ever</h3>
												<h4>you can use it with the small code</h4>
											</div>
											<div class="second-child-right">
												<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
											</div>
										</div>
										<div class="second-child-tab">
											<div class="second-child-left">
												<h3>Lets check profile</h3>
												<h4>you can use it with the small code</h4>
											</div>
											<div class="second-child-right">
												<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
											</div>
										</div>
										<div class="second-child-tab">
											<div class="second-child-left">
												<h3>Come on you have a lot message</h3>
												<h4>you can use it with the small code</h4>
											</div>
											<div class="second-child-right">
												<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
											</div>
										</div>
										
									</div>
								</div>
								
							</div>
						</div>
					</div>
					
					<div class="rows first dels">
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit">
										<h3><strong>Info Panel</strong><span><a href="###" class="min">-</a><a href="###" class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit sec">
										<h3><strong>Warning Panel</strong><span><a href="###" class="min">-</a><a href="###"  class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit thi">
										<h3><strong>Danger Panel</strong><span><a href="###" class="min">-</a><a href="###"  class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit fou">
										<h3><strong>Success Panel</strong><span><a href="###" class="min">-</a><a href="###"  class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit fiv">
										<h3><strong>Primary Panel</strong><span><a href="###" class="min">-</a><a href="###"  class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							<div class="del-first-child">
								<div class="del-first-child-con">
									<div class="del-first-tit six">
										<h3><strong>Inverse Panel</strong><span><a href="###" class="min">-</a><a href="###"  class="del">×</a></span></h3>
									</div>
									<div class="del-first-cons">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
									</div>
								</div>
							</div>
							
						
					</div>
					
					<div class="rows first">
						<div class="firsts-con">
							<h2>Wells</h2>
						</div>
						<div class="second">
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-cons">
									<h4>Normal Well</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-cons">
									<h4>Large Well</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
						<div class="second-child">
							<div class="second-child-con">
								<div class="second-child-cons"  style="padding:9px">
									<h4>Small Well</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
								</div>
							</div>
						</div>
					
					</div>
					</div>
					
							
						</div>
					</div>
					<footer><h3>2017 © Ample Admin brought to you by themedesigner.in</h3></footer>
				</div>
			</div>
		</div>
		
	</body>
</html>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" ></script>
<script src="js/panels-wells.js" type="text/javascript"></script>
